<template>
	<view class="content">
		<view class="wrap">
			<view class="swnav" :style="{top: titleTop + 'px'}">
				<image class="logo" src="/static/img/logo.png" />
			</view>
			<u-swiper :list="swlist" height="750" @click="swclick"></u-swiper>
		</view>
		<view class="nav" v-if="is_shenhe==0">
			<scroll-view class="navone" scroll-x>
				<view class="classitem">
					<view class="items" :class="item.id==classitem.id?'iactive':''" v-for="(item,index) in classlist" :key="index" @click="getclickclass(item)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="tuan" v-if="tuanlist!=''&&is_shenhe==0">
			<view class="tuanhead">
				<text class="tname">团购</text>
				<text class="ptgou">品牌5折起团购</text>
				<view class="qg ml"  @click="gettuan">
					<text class="qgname">立即抢购</text>
					<image class="icon_ck" src="/static/img/icon_ck.png" />
				</view>
			</view>
			<view class="tuannav">
				<scroll-view scroll-x class="tuanview">
					<view class="titem" v-for="(item,index) in tuanlist" :key="index" @click.stop="goumai(item)">
						<image class="tu" :src="item.image" mode="aspectFill" lazy-load />
						<!-- <u-image class="tu" :src="item.image" :lazy-load="true"></u-image> -->
						<view class="tinav">
							<text class="tbiao txt">{{item.title}}</text>
							<view class="tuansheng" v-if="item.price_text!=0">
								<text class="shengname txt">团购省 {{ item.price_text }} 元</text>
								<image class="comm_icon_next" src="/static/img/comm_icon_next.png" />
							</view>
							<view class="tuansheng mfl" v-if="item.price_text==0">
								<text class="shengname txt">免费领取</text>
								<image class="comm_icon_next" src="/static/img/comm_icon_next.png" />
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="rexiao" v-if="items!=''">
			<view class="rehade">
				<text class="retit">热销榜</text>
				<!-- <view class="geng">
					<text class="gname">更多</text>
					<image class="icon_next" src="/static/img/icon_next.png" />
				</view> -->
			</view>
			<scroll-view scroll-x class="renav" :scroll-left="scrollLeft" scroll-with-animation>
				<view class="rlist" v-for="(item,index) in items" :key="index" @click.stop="getDetail(item)">
					<image class="tuimg" :src="item.image" lazy-load />
					<view class="pin">
						<view class="pinone">
							<view class="zhenxuan">{{item.tip}}</view>
							<text class="shopname txt">{{item.title}}</text>
						</view>
						<view class="jia">
							<text class="xjia"><text class="xiao">￥</text>{{ item.price }}</text>
							<text class="yjia">￥{{ item.oprice }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="rexiao">
			<view class="rehade">
				<text class="retit">最新产品</text>
				<!-- <view class="geng">
					<text class="gname">更多</text>
					<image class="icon_next" src="/static/img/icon_next.png" />
				</view> -->
			</view>
			<view class="xinlist" v-for="(item,index) in list" :key="index" @click.stop="getDetail(item)">
				<image class="tuimg" :src="item.image" lazy-load mode="aspectFill" />
				<view class="xinright">
					<text class="xinname txt">{{ item.title }}</text>
					<view class="xbqian">
						<view class="bitem" v-for="(i,ind) in item.taps" :key="ind">{{ i }}</view>
					</view>
					<view class="jia">
						<text class="xjia"><text class="xiao">￥</text>{{ item.price }}</text>
						<text class="yjia">￥{{ item.oprice }}</text>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" @loadmore="loadmore" />
		</view>

		<MenOrderPop v-if="menpopshow" :latitude="latitude" :longitude="longitude" :menpopshow="menpopshow" @getxuanmen="getxuanmen" @closemenpop="closemenpop" :tlist="tlist"></MenOrderPop>
	</view>
</template>

<script>
import MenOrderPop from '@/components/MenOrderPop/MenOrderPop'
	export default {
		data() {
			return {
				invite_code:'',
				swlist: [
					// {
					// 	image: this.ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png'),
					// 	title: "昨夜星辰昨夜风，画楼西畔桂堂东",
					// },
					// {
					// 	image: this.ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png'),
					// 	title: "身无彩凤双飞翼，心有灵犀一点通",
					// },
					// {
					// 	image: this.ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png'),
					// 	title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
					// },
				],
				titleTop: 0,
				items: [], // 假设有5个项目
				scrollLeft: 0, // 初始滚动位置
				intervalId: null, // 定时器ID
				
				classlist:[],
				classitem:'',
				tpage:1,
				tuanlist:[],
				rexiaolist:[],
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
				latitude:'',
				longitude:'',
				menpopshow:false,
				tlist:[],
				shopid:'',
				is_shenhe:1,////1就是开启审核

			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: '东方蓉妍',
				// imageUrl:this.list[this.currentIndex].image,
				path: '/pages/tabbar/index?invite_code='+this.$store.state.code||uni.getStorageSync('code')
			}
		},
		onShareTimeline(){
			return {
				title: '东方蓉妍',
				// imageUrl:this.list[this.currentIndex].image,
				path: '/pages/tabbar/index?invite_code='+this.$store.state.code||uni.getStorageSync('code')
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			let that = this;
			// 获取胶囊按钮位置信息
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const { top, height } = menuButtonInfo;
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

			// 计算标题需要偏移的位置
			const titleTop = top + (height - statusBarHeight) / 2;
			this.titleTop = titleTop;//设置标题顶部距离
			this.statusBarHeight = statusBarHeight;//设置状态栏高度
			// #endif
			// #ifdef H5
			this.titleTop = 20;//设置标题顶部距离
			// #endif
			this.startScroll();//开始滚动
		},
		beforeDestroy() {
			clearInterval(this.intervalId); // 清除定时器，防止内存泄漏
		},
		onLoad(option) {
			if(option.invite_code){
				this.invite_code = option.invite_code
				uni.setStorageSync('invite_code',this.invite_code);
				this.$store.commit('changeinvite_code',this.invite_code);
			}
			// uni.setStorageSync('token','33693b53-2183-405f-8e70-e60ac1100110')
			// 	this.$store.commit('user/changeToken', '33693b53-2183-405f-8e70-e60ac1100110');
		},
		onShow() {
			this.getinit()
			if(uni.getStorageSync('token')){
				this.getuser()
			}
			this.getshenhe()
		},
		onReachBottom: function () {
			this.loadmore();
		},
		methods: {
			async getshenhe(){
				let res = await this.$u.api.getShenhe({
				});
				if(res){ 
					if(!this.compareVersion(this.$store.state.Version,res.version)){
						//当前版本小于 接口返回版本
						this.is_shenhe = res.is_shenhe//1就是开启审核
						// #ifdef H5
						this.is_shenhe = 0
						//  #endif
					}else{
						//当前版本等于或者大于 接口返回版本 显示
						this.is_shenhe = 0
					}
				}
			},
			async getuser(){
				let res = await this.$u.api.getData({
				});
				if(res.data.id){//本地分享参数缓存
					uni.setStorageSync('code',res.data.id);//2老板
					this.$store.commit('changecode',res.data.id);
				}
			},
			getdinwei(){
			
				//#ifdef MP-WEIXIN
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: (res)=>{
						console.log(res)
						if(res.latitude){
							that.latitude = res.latitude
						}
						if(res.latitude){
							that.longitude = res.longitude
						}
					},fail:(e)=>{
						console.log(e)
					}
				})
				//#endif
				//#ifdef H5
				this.latitude = '34.74821'
				this.longitude = '113.61332'
				//#endif
				
				
			},
			startScroll() {
				this.intervalId = setInterval(() => {
					// 计算下一个滚动位置
					const itemWidth = 200; // 每个item的宽度（包括margin）
					const scrollStep = itemWidth + 10; // 每次滚动的距离（item宽度 + margin）
					this.scrollLeft += scrollStep;
					if (this.scrollLeft >= (this.items.length * (itemWidth + 10) - this.getScrollViewWidth())) {
					// 如果滚动到最后一个item，则重置滚动位置
					this.scrollLeft = 0;
					}
				}, 5000); // 每秒移动一次
			},
			getScrollViewWidth() {
				// 获取scroll-view的宽度，这里需要根据实际情况调整或使用其他方法获取
				return uni.getSystemInfoSync().windowWidth; // 或者其他方法获取宽度
			},
			getDetail(item){
				this.navrouter('/pages_client/twoPage/ShopDetail?type=1'+'&id='+item.id)
			},
			gettuanDetail(item){
				this.navrouter('/pages_client/twoPage/TuanDetail?type=2'+'&id='+item.id+'&latitude='+this.latitude+'&longitude='+this.longitude)
			},
			gettuan(){
				if(!this.latitude){
					//#ifdef MP-WEIXIN
					let that = this
					uni.getLocation({
						type: 'wgs84',
						success: (res)=>{
							console.log(res)
							if(res.latitude){
								that.latitude = res.latitude
							}
							if(res.latitude){
								that.longitude = res.longitude
							}
							this.navrouter('/pages_client/twoPage/Tuangou?latitude='+this.latitude+'&longitude='+this.longitude)
						},fail:(e)=>{
							console.log(e)
							this.navrouter('/pages_client/twoPage/Tuangou?latitude='+this.latitude+'&longitude='+this.longitude)
						}
					})
					//#endif
				}else{
					this.navrouter('/pages_client/twoPage/Tuangou?latitude='+this.latitude+'&longitude='+this.longitude)
				}
				
			},
			getinit(){
				this.getBanner()
				this.getcate()
				if(uni.getStorageSync('token')){
					this.getdinwei()
				}
			},
			async getBanner() {
				let res = await this.$u.api.getBanner({
				});
				this.swlist = res
			},
			async getcate() {
				let res = await this.$u.api.getCate({
				});
				this.classlist = res
				if(this.classitem==''||!this.classitem){
					this.classitem = res[0]
				}
				
				this.getlists();//数据合集
				this.getList();//数据合集
			},
			getclickclass(item){
				this.classitem = item
				this.getlists();//数据合集
				this.getClear();//数据合集
			},
			getClear(){
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			async getlists(){
				let restuan = await this.$u.api.getTuanList({
					cate_id:this.classitem.id,
					page:this.tpage
				});
				this.tuanlist = restuan.list

				let resrexiao = await this.$u.api.getTopGoods({
					cate_id:this.classitem.id,
					page:this.tpage
				});
				this.items = resrexiao.list

				
			},
			async getList(){//列表数据
				let res = await this.$u.api.getNewGoods({
					cate_id:this.classitem.id,
				  page:this.page
				});
					let list = res.list;
					this.list = this.page == 1 ? list : [...this.list, ...list];	
					if(res.list==''||Number(list.length)<Number(this.limit)){
						this.status = 'nomore';
					}
			},
			loadmore() {
				let page = this.page;
				// let last_page = this.last_page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			closemenpop(){
				this.menpopshow = false
			},
			getxuanmen(e){
				this.closemenpop()
				this.navrouter('/pages_client/twoPage/TuanDetail?type=2'+'&id='+this.shopid+'&shop_id='+e.id+'&longitude='+this.longitude+'&latitude='+this.latitude)
			},
			async goumai(item){
				this.gettuan()
				// this.shopid = item.id
				// let res = await this.$u.api.getShopList({
				// 	id:item.id,
				// 	latitude:this.latitude,
				// 	longitude:this.longitude
				// });
				// let data = res
				// for(let i in data){
				// 	data[i].isselect = false
				// }
				// this.tlist = data
				// if(this.tlist!=''){
				// 	this.menpopshow = true
				// }else{
				// 	this.$u.toast("暂无可用门店");
				// }
				
			},
			swclick(e){
				console.log(this.swlist)
				console.log(e)
				if(this.is_shenhe == 1){
					return;
				}
				if(this.swlist[e].shop_goods_id&&this.swlist[e].shop_goods_id!=0){
					//跳转商品
					this.navrouter('/pages_client/twoPage/ShopDetail?type=1'+'&id='+this.swlist[e].shop_goods_id)
				}else if(this.swlist[e].tuan_goods_id&&this.swlist[e].tuan_goods_id!=0){
					//选择团购
					this.gettuangou(this.swlist[e])
				}
			},
			async gettuangou(item){
				this.shopid = item.tuan_goods_id
				if(!this.latitude){
					//#ifdef MP-WEIXIN
					let that = this
					uni.getLocation({
						type: 'wgs84',
						success: (res)=>{
							console.log(res)
							if(res.latitude){
								that.latitude = res.latitude
							}
							if(res.latitude){
								that.longitude = res.longitude
							}
							this.gettuangou(item)
						},fail:(e)=>{
							console.log(e)
							this.gettuangou(item)
						}
					})
					//#endif
				}else{
					let res = await this.$u.api.getShopList({
						id:item.tuan_goods_id,
						latitude:this.latitude,
						longitude:this.longitude
					});
					let data = res
					for(let i in data){
						data[i].isselect = false
					}
					this.tlist = data
					
					if(this.tlist!=''){
						this.menpopshow = true
					}else{
						this.$u.toast("暂无可用门店");
					}
				}
				
			}
				
		},
			
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		min-height: 100vh;
		padding-bottom: 120rpx;
		overflow-x: hidden;
		.swnav{
			position: absolute;
			left: 30rpx;
			z-index: 100;
			.logo{
				width: 150rpx;
				height: 44rpx;
			}
		}
		.nav{
			background-color: #fff;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			margin-top: -20rpx;
			position: relative;
			padding-top: 30rpx;
			padding-left: 30rpx;
			// padding-right: 30rpx;
			.navone{
				white-space: nowrap;
				width: 100%;
				// padding-left: 30rpx;
				// padding-right: 40rpx;
				.classitem{
					// min-width: 140rpx;
					
					position: relative;
					display: flex;
					flex-direction: row;
					padding-right: 40rpx;
					.items{
						position: relative;
						display: flex;
						height: 68rpx;
						padding: 10rpx 25rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						border: 1px solid #CCCCCC;
						font-weight: 400;
						font-size: 24rpx;
						color: #402421;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;
					}
					.img_btn{
						position: absolute;
						width: 100%;
						height: 100%;

					}
					.iactive{
						background: linear-gradient(0deg, #2C2B2D, #4D403A);
						color: #fff;
					}
				}
			}
		}
		.tuan{
			background: linear-gradient(0deg, #2C2B2D, #4D403A);
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			margin:40rpx 30rpx 50rpx;
			padding: 10rpx;
			.tuanhead{
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 20rpx;
				.tname{
					font-weight: 800;
					font-size: 36rpx;
					color: #F7EDE4;
				}
				.ptgou{
					font-weight: 400;
					font-size: 20rpx;
					color: #E5BF8D;
					margin-left: 20rpx;
				}
				.qg{
					display: flex;
					flex-direction: row;
					align-items: center;
					.qgname{
						font-weight: bold;
						font-size: 20rpx;
						color: #F7EDE4;
					}
					.icon_ck{
						width: 16rpx;
						height: 16rpx;
						margin-left: 10rpx;
						position: relative;
						top: 2rpx;
					}
				}
			}
			.tuannav{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				
				padding: 20rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 15rpx;
				.tuanview{
					white-space: nowrap;
					width: 100%;
					.titem{
						width: 195rpx;
						// height: 250rpx;
						display: inline-block;
						margin-right: 24rpx;
						.tu{
							border-radius: 20rpx 20rpx 0 0;
							width: 100%;
							height: 190rpx;
							object-fit: cover;
						}
						.tinav{
							height: 96rpx;
							background: #F5F5F5;
							border-radius: 16rpx;
							display: flex;
							flex-direction: column;
							padding: 0 15rpx;
							margin-top: -10rpx;
							position: relative;
							.tbiao{
								width: 100%;
								display: inline-block;
								font-weight: bold;
									font-size: 26rpx;
									color: #000000;
							}
							.tuansheng{
								height: 36rpx;
								background: #483C38;
								border-radius: 10rpx;
								width: 100%;
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: center;
								margin-top: 13rpx;
								.shengname{
									font-weight: 400;
									font-size: 20rpx;
									color: #FFFFFF;
									display: inline-block;
								    max-width: 80%;
								}
								.comm_icon_next{
									width: 14rpx;
									height: 14rpx;
									margin-left: 4rpx;
								}
							}
							.mfl{
								background: #e52020;
							}
						}
					}

				}
			}
		}
		.rexiao{
			display: flex;
			flex-direction: column;
			margin-top: 25rpx;
			.rehade{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 30rpx;
				margin: 0 30rpx 30rpx;
				.retit{
					font-weight: 800;
					font-size: 40rpx;
					color: #111111;
				}
				.geng{
					margin-left: auto;
					display: flex;
					flex-direction: row;
					align-items: center;
					.gname{
						font-weight: 500;
						font-size: 24rpx;
						color: #111111;
					}
					.icon_next{
						width: 20rpx;
						margin-left: 4rpx;
						height: 20rpx;
					}
				}
			}
			.renav{
				white-space: nowrap;
				// width: 100%;
				padding-left: 30rpx;
				// transition: transform 0.5s ease;
				animation-duration: 2s;
				margin-bottom: 40rpx;
				overflow-x: hidden;
				.rlist{
					display: inline-block;
					width: 400rpx;
					position: relative;
					margin-right: 30rpx;
					.tuimg{
						width: 400rpx;
						height: 400rpx;
						border-radius: 20rpx;
						margin-bottom: 15rpx;
					}
					.pin{
						padding: 20rpx;
						position: relative;
						.pinone{
							display: flex;
							flex-direction: row;
							.zhenxuan{
								padding: 2rpx 10rpx;
								background: #47201A;
								border-radius: 5rpx;
								margin-right: 13rpx;
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: center;
								font-weight: 500;
								font-size: 20rpx;
								color: #FFFFFF;
							}
							.shopname{
								max-width: 85%;
								display: inline-block;
								font-weight: 800;
								font-size: 32rpx;
								color: #111111;
							}
						}
						.jia{
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-top: 20rpx;
							.xjia{
								font-weight: bold;
								font-size: 35rpx;
								color: #FF6100;
							}
							.xiao{
								font-size: 28rpx;
							}
							.yjia{
								font-weight: 400;
								font-size: 24rpx;
								color: #111111;
								display: inline-block;
								margin-left: 14rpx;
							}
						}
					}
				}
			}
		}
		.xinlist{
			background: #F5F5F5;
			border-radius: 16rpx;
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			margin: 0 30rpx 30rpx;
			.tuimg{
				width: 200rpx;
				height: 200rpx;
				margin-right: 30rpx;
				border-radius: 20rpx;
			}
			.xinright{
				width: 65%;
				display: flex;
				flex-direction: column;
				position: relative;
				.xinname{
					font-weight: 800;
					font-size: 32rpx;
					color: #111111;
					max-width: 100%;
					display: inline-block;
				}
				.xbqian{
					display: flex;
					flex-direction: row;
					margin: 20rpx 0 0;
					.bitem{
						padding: 2rpx 8rpx;
						background: #EEEEEE;
						border-radius: 5rpx;
						border: 1rpx solid #999999;
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						margin-right: 15rpx;
					}
					
				}
				.jia{
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-top: auto;
						.xjia{
							font-weight: bold;
							font-size: 35rpx;
							color: #FF6100;
						}
						.xiao{
							font-size: 28rpx;
						}
						.yjia{
							font-weight: 400;
							font-size: 24rpx;
							color: #111111;
							display: inline-block;
							margin-left: 14rpx;
						}
					}
			}
		}
	}
</style>
